import Taro from '@tarojs/taro';
import {Image, View, Text} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import './myBalance.scss';
import none from "../../../asset/images/none.png";
import Close from "../../../asset/images/close.png";
import Xia from "../../../asset/images/xia.png";
import Shang from "../../../asset/images/shang.png";

class MyBalance extends Taro.Component {
    config = {
        navigationBarTitleText: '余额',
        navigationBarBackgroundColor: '#ffffff'
    };

    state = {
        moneyList: [],
        mealStatus: false, //套餐弹窗
        mealStatusNext: false, //套餐弹窗1
        tkMeal: [], //退款套餐
        tkMealList: [], //退款套餐列表

    };

    componentDidMount() {
        this.init();
    }

    init = () => {
        //获取充值记录
        const params = {
            url: '/wx/packages/listCurUserPackages',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            moneyList: res.data,
                        })
                    }
                }
            }
        });
        //获取退款列表
        const paramss = {
            url: '/wx/packages/listRefundablePackages',
            data:{}
        };
        request(paramss).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            tkMealList: res.data, //获取退款套餐列表
                            tkMeal: res.data[0], //默认优先选择第一个
                        })
                    }
                }
            }
        })
    };

    //退款
    paySetMeal = () => {
        this.setState(prevState => ({
            mealStatus: !prevState.mealStatus,
        }))
    };

    //选择套餐
    alterContent = (item) => {
        console.log(JSON.stringify(this.state.tkMeal))
        this.setState(prevState => ({
            tkMeal: item ? item : prevState.tkMeal,
            mealStatusNext: !prevState.mealStatusNext,
        }))
    };

    sumbit = () => {
        console.log(JSON.stringify(this.state.tkMeal))
        const params = {
            url: '/wx/pay/refund',
            data:{
                orderId: this.state.tkMeal.orderId
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    this.paySetMeal();
                    this.init();
                }
            }
        });
    };

    render() {
        const {moneyList,mealStatus, mealStatusNext, tkMealList, tkMeal} = this.state;
        const option = this.$router.params;
        return (
            <View className="myBalance">
                <View className="balance-wrap">
                    <View className="balance-contents flex-lr">
                        <View>
                            <View className="text">账户余额</View>
                            <View className="price">¥{option.price ? option.price || 0 : 0}</View>
                        </View>
                        {tkMealList && tkMealList.length != 0 &&(
                            <View className="tk-text" onClick={this.paySetMeal}>申请退款</View>
                        )}
                    </View>
                </View>
                <View className="balance-list-wrap">
                    <View className="balance-name">交易记录</View>
                    {moneyList && moneyList.map((item, index) => (
                        <View className="list-item flex-lr" key={index}>
                            <View>
                                <View className="name">{item.tradeStateDesc}</View>
                                <View>{item.tradeDate}</View>
                            </View>
                            <View className={`number ${item.directionSign == '+' ? 'number-zheng' : ''}`}>{item.directionSign == '+' ? '+' + item.factAcceptCharge : '-' + item.factAcceptCharge}</View>
                        </View>
                    ))}
                    {moneyList && moneyList.length == 0 &&(
                        <View className="none">
                            <Image src={none}/>
                            <View>暂无记录</View>
                        </View>
                    )}
                </View>
                {mealStatus && (
                    <View className="model-type flex-bottom">
                        <View className="set-meal-content">
                            <View className="meal-names">
                                <View>申请退款</View>
                                <Image className="img-close" src={Close} onClick={this.paySetMeal} mode="aspectFit"/>
                            </View>
                            <View className="meal-list-wrap">
                                <View className="meal-list flex-lr">
                                    <View>退款充值套餐</View>
                                    <View className="flex-r tc-name" onClick={this.alterContent.bind(this, tkMeal)}>
                                        <View>{tkMeal.packageName}</View>
                                        <Image className="xia-icon" src={mealStatusNext ? Shang : Xia} mode="aspectFit"/>
                                    </View>
                                    {mealStatusNext &&(
                                        <View className="meal-next-wrap">
                                            {tkMealList.map((item, index) => (
                                                <View className={`next-list flex-center ${(index+1) == tkMealList.length ? 'next-list-none' : ''}`} key={index} onClick={this.alterContent.bind(this, item)}>{item.packageName}</View>
                                            ))}
                                            <View className="tishi-text flex-center">仅显示7天内可退</View>
                                        </View>
                                    )}
                                </View>
                                <View className="meal-list flex-lr">
                                    <View>充值时间</View>
                                    <View className="name">{tkMeal.tradeDate}</View>
                                </View>
                                <View className="meal-list meal-list-none flex-lr">
                                    <View>可退金额</View>
                                    <View className="name">{tkMeal.factAcceptCharge}元</View>
                                </View>
                                <View className="meal-list meal-list-none flex-lr">
                                    <View>退款方式</View>
                                    <View className="name">微信钱包（5个工作日内到账）</View>
                                </View>
                            </View>
                            <View className="max-btn flex-center" onClick={this.sumbit}>确认退款</View>
                        </View>
                    </View>
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyBalance);



